﻿@page "/accordion/template"

@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent;

    <SampleDescription>
        <p> This example demonstrates the template functionalities of the <code>Accordion</code> component. The content of panel `Network & Connectivity` is loaded from external blazor component.</p>
    </SampleDescription>
    <ActionDescription>
        <p> This sample illustrates to load an <code>Accordion</code> content from another razor page by using <code>ContentTemplate</code> property. The content of panel `Camera` is loaded based on the nested behavior of `Accordion` component.</p>
    </ActionDescription>

    <div class="control-section">
        <div class="control_wrapper accordion-control-section">
            <div class="product_title"> iPhone X Product Specification </div>
            <div>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem>
                            <HeaderTemplate>Network & Connectivity</HeaderTemplate>
                            <ContentTemplate>
                                <NetworkData></NetworkData>
                            </ContentTemplate>
                        </AccordionItem>
                        <AccordionItem>
                            <HeaderTemplate>Feature</HeaderTemplate>
                            <ContentTemplate>
                                <SfAccordion ExpandMode="@ExpandMode.Single">
                                    <AccordionItems>
                                        <AccordionItem>
                                            <HeaderTemplate>Sensor</HeaderTemplate>
                                            <ContentTemplate>
                                                <div>
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <td class="e-bold">Proximity sensor</td>
                                                                <td>Yes</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Face ID</td>
                                                                <td>Yes</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Accelerometer</td>
                                                                <td>Yes</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </ContentTemplate>
                                        </AccordionItem>
                                        <AccordionItem>
                                            <HeaderTemplate>Camera</HeaderTemplate>
                                            <ContentTemplate>
                                                <div>
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <th class="e-bold" rowspan="3">Camera</th>
                                                                <td class="e-bold"> 12MP wide-angle</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Live Photos with stabilization</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Body and face detection</td>
                                                            </tr>
                                                            <tr>
                                                                <th class="e-bold" rowspan="4">TrueDepth Camera</th>
                                                                <td class="e-bold"> 7MP camera</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold"> Animoji</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold"> Face detection</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </ContentTemplate>
                                        </AccordionItem>
                                        <AccordionItem>
                                            <HeaderTemplate>Video Recording</HeaderTemplate>
                                            <ContentTemplate>
                                                <div>
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <th class="e-bold" rowspan="9">Video Recording</th>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">4K video recording</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">1080p &amp; 720p HD video recording</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Optical zoom, 6x digital zoom</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Slow motion video support</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Take 8MP still photos while recording 4K video</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="e-bold">Noise reduction</td>
                                                            </tr>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </ContentTemplate>
                                        </AccordionItem>
                                    </AccordionItems>
                                </SfAccordion>
                            </ContentTemplate>
                        </AccordionItem>
                        <AccordionItem>
                            <HeaderTemplate>Hardware & Software</HeaderTemplate>
                            <ContentTemplate>
                                <div>
                                    <table>
                                        <tbody>
                                            <tr>
                                                <th rowspan="3"> Hardware</th>
                                                <td class="e-bold" rowspan="2 ">Chip</td>
                                                <td>Apple A11 Bionic chip with 64-bit architecture</td>
                                            </tr>
                                            <tr>
                                                <td>Embedded M11 motion coprocessor</td>
                                            </tr>
                                            <tr>
                                                <td class="e-bold">Capacity</td>
                                                <td>64GB/256GB</td>
                                            </tr>
                                            <tr>
                                                <th> Software</th>
                                                <td class="e-bold" rowspan="2 ">Operating System</td>
                                                <td>iOS 11</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </ContentTemplate>
                        </AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </div>
        </div>
        <div id="source_link">
            Source: &nbsp;
            <a href="https://www.apple.com/iphone-x/specs/" target="_blank">www.apple.com/iphone-x/specs/</a>
        </div>
    </div>

    <style>
        @@-moz-document url-prefix() {
            .e-accordion .e-content table {
                border-collapse: initial;
            }
        }

        .e-accordion table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
        }

            .e-accordion table th,
            .e-accordion table td {
                font-weight: normal;
                padding: 5px;
                text-align: left;
                border: 1px solid #ddd
            }

        .product_title {
            text-align: center;
            margin: 20px 0;
            padding: 10px 0;
            text-overflow: ellipsis;
            font-weight: bold;
            font-size: 16px;
        }

        .accordion-control-section {
            margin: 0 10% 0 10%;
            padding-bottom: 25px;
        }
    </style>